// 0. 公共代码
import router from '@/router'
import store from '@/store'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import { AsyncRoutes } from '@/router'

const whiteList = ['/login', '/404']

// 需求：有token且访问不是登录页，在前置路由守卫调获取用户信息存vuex的action

// 1. 配置前置路由守卫（完成路由切换前）
router.beforeEach(async(to, from, next) => {
  // console.log('执行了前置路由守卫')
  // 开启进度条
  nprogress.start()
  // 1.1 判断是否有token
  if (store.getters.token) {
    // 1.2 判断是否去登录页
    if (to.path === '/login') {
      next('/')
      nprogress.done()
    } else {
      // 有token且访问不是登录页，且vuex中没有用户信息
      // 在前置路由守卫调获取用户信息存vuex的action
      // 调action得到是promise
      if (!store.getters.userId) {
        // 1. 获取了用户拥有的权限
        const { roles } = await store.dispatch('user/getUserInfo')
        // console.log(roles.menus) // ['department', 'role']
        // 2. 筛选动态路由, 得到用户能访问的动态路由
        // console.log(AsyncRoutes)
        const UserAsyncRoutes = AsyncRoutes.filter((item) => {
          return roles.menus.includes(item.name)
        })
        // console.log(UserAsyncRoutes)
        // 3. 把用户能访问的动态路由丢到vuex中，渲染左侧的菜单
        store.commit('user/setRoutes', UserAsyncRoutes)
        // 4. 把筛选出来的动态路由，加到路由核心对象上
        // console.log(123)
        router.addRoutes([
          ...UserAsyncRoutes,
          { path: '*', redirect: '/404', hidden: true }])
        // 添加动态路由之后，一定要重新跳转要去向的路径
        return next(to.path)
      }
      if (to.path.startsWith('/employee/detail')) {
        if (to.path === '/employee/detail') {
          to.meta.title = '添加员工'
        } else {
          to.meta.title = '编辑员工'
        }
      }
      next()
    }
  } else {
    // 1.3 判断去向是不是白名单页面
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      nprogress.done()
    }
  }
})

// 没有切换完成的路由，需要再手动关一次进度条

// 2. 配置后置路由守卫（完成路由切换后）
router.afterEach((to, from) => {
  // console.log('执行了后置路由守卫')
  // 关闭进度条
  nprogress.done()
})
